<template>
    <div class="video-baseinfo-box">
        <div class="video-baseinfo">
            <img src="../assets/img/play_btn.png" alt="" srcset="" class='play-btn'>
            <div class='info'>
                <div class="user">
                    <img src="../assets/img/timg.jpg" alt="" srcset="" class='user-head'>
                    <span class='user-name'>越野侠</span>
                </div>
                <div class='vote-number'>
                    <div class='icon'>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="number">1234</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Video'
}
</script>
<style lang="stylus" scoped>
@import '../assets/css/animate.css';
    .video-baseinfo-box
        width 100%
        height 100%
        background-image url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578033362955&di=9c004a5e238698a2436391e7f2d77a40&imgtype=0&src=http%3A%2F%2F07.imgmini.eastday.com%2Fmobile%2F20180208%2F20180208231825_08dce65c639e60cacf8e6e27e8de795c_2.jpeg')
        background-size cover
        position relative
        .video-baseinfo
            width 100%
            height 100%
            position absolute
            top 0px
            left 0px
            background rgba(0,0,0,0.1)
            display flex
            justify-content center
            align-items center
            .play-btn
                display block
                width 16px
                height 20px
            .info
                width 100%
                height 36px
                box-sizing border-box
                background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
                position absolute 
                bottom 0px
                display flex
                justify-content space-between;
                align-items center
                color #FFF2E6
                font-size 12px
                padding 0 12px
                .user
                    display flex
                    align-items center
                    box-sizing border-box
                    .user-head
                        width 16px
                        height 16px
                        border-radius 8px
                        margin-right 4px
                .vote-number
                    display flex
                    .icon 
                        width 18px
                        display flex
                        justify-content space-between
                        margin-right 4px
                        position relative
                        span
                            display inline-block
                            position absolute
                            bottom 0
                            width 25%
                            background #FFF2E6
                            animation rhythm 0.5s linear infinite
                            &:nth-child(2){
                                animation-delay 0.1s
                                left 35%
                            }
                            &:nth-child(3){
                                animation-delay 0.2s
                                left 70%
                            }
                    .number
                        transform translateY(2px);
</style>